// pages/video/video.js
import request from "../../utils/request"
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navInfo:[], // 导航栏的数据
    navIndex:'',
    videoList: [],
    videoId:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取导航栏的数据
    this.getNavInfo()
  },
  // 获取导航栏的信息
  async getNavInfo() {
    let navInfoData = await request('/video/group/list')
    let navInfo = navInfoData.data.slice(0,14)
    this.setData({
      navInfo,
      navIndex: navInfo[0].id
    })
    // 获取视频数据
    this.getVideoData(this.data.navIndex)
  },

  // 动态的给nav添加下边框
  changeNav(event) {
    // 这个时候拿到的id是字符串类型，用位运算符强制转换一下
    let navIndex = event.currentTarget.id
    this.setData({
      navIndex: navIndex >>> 0,
      videoList:[]  // 每次点击切换的时候都需要把之前的数据清空

    })
    // 点击跳转的时候，需要显示正在加载，当数据已经拿到的时候再去关闭
    wx.showLoading({
      title: '正在加载中',
    })
    // 每次点击重新发送网络请求
    this.getVideoData(this.data.navIndex)
  },
  // 获取视频数据的函数
  async getVideoData(navIndex) {
    let videoListData = await request('/video/group',{id:navIndex});
    let index = 0;
    let videoList = videoListData.datas.map(item => {
      item.id = index++;
      return item;
    })
    this.setData({
      videoList
    })
    // 关闭加载框
    wx.hideLoading()
  },
  // 多个视频同时播放的问题
  // 只让一个视频播放，在播放一个视频时，让上一个视频停止
  handelVideo(event){
    let vid = event.currentTarget.id
    // 判断 this上的vid和当前视频的vid不是同一个，并且有videoContent实例的情况下，再去停止上一个视频
    // this.vid !== vid && this.videoContent && this.videoContent.stop()
    // this.vid = vid 
    this.setData({
      videoId: vid
    })
    this.videoContent =  wx.createVideoContext(vid)
    this.videoContent.play()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})